<template>
	<view class="sitePage">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true" class="nav-custom">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">城市选择</block>
			<block slot="right">
				<text class="mr25 fs28" @click="openEdit(true)" v-show="!editShow">编辑</text>
				<text class="mr25 fs28" @click="openEdit(false)" v-show="editShow">确定</text>
				<!-- <text>确认</text> -->
			</block>
		</cu-custom>

		<view class="app-box" :style="{ height: appHeight + 'px' }">
			<template v-if="!addShow">
				<view class="flex-bt title-box">
					<view class="add-box flex-cc" @click="addShowEv">
						<u-icon name="plus-circle-fill" color="#0085FF" size="32"></u-icon>
						<text style="color: #0085ff" class="ml10">三明/三明地区</text>
					</view>
					<view class="flex-vc">
						<text>自动定位</text>
						<u-switch v-model="autoPos" :size="40" class="ml5"></u-switch>
					</view>
				</view>
				<view class="street">
					<view class="street-sin" @click="clickPreObj">
						<view class="flex-cc ml40" :style="{ color: code == preObj.areaCode ? '#0085ff' : '#000' }">
							<i class="iconfont icon-chengshi"></i>
							<text class="ml15">{{ preObj.name }}</text>
						</view>
						<i class="iconfont icon-dingwei mr50" :style="{ color: code == preObj.areaCode ? '#0085ff' : '#fff' }"></i>
					</view>
					<u-swipe-action
						:show="item.show"
						:index="index"
						v-for="(item, index) in nextArr"
						:key="index"
						@click="deleteItem(index)"
						:options="options"
						btn-width="100"
					>
						<view class="street-sin" @click="clickItem(item)">
							<view class="flex-cc ml40" :style="{ color: code == item.code ? '#0085ff' : '#000' }">
								<i class="iconfont icon-chengshi"></i>
								<text class="ml15">{{ item.name }}</text>
							</view>
							<i class="iconfont icon-dingwei mr50" :style="{ color: code == item.code ? '#0085ff' : '#fff' }"></i>
						</view>
					</u-swipe-action>
				</view>
			</template>
			<template v-else>
				<view class="add-content">
					<view class="mt20">
						<u-input
							v-model="searchValue"
							placeholder="查询三明地区"
							type="text"
							:border="true"
							class="add-input"
							height="70"
						/>
						<view class="mt10 ml10 fs24" style="color: #b7b7b7">查询全市城/镇：三明/sanming/sm</view>
					</view>

					<view class="height-sv">
						<u-collapse
							class="collapse-view-box mt10"
							ref="collapse"
							:accordion="false"
							style="width: 750rpx; padding: 0 30rpx 0 60rpx"
							v-show="searchValue.length == 0"
						>
							<u-collapse-item title="三明市" :open="mainOpen" @change="changecollapse" itemClass="mainClass">
								<view class="sv-box-collapse">
									<template v-for="(i, index) in cityJson">
										<view
											:key="index"
											v-if="!i.children || i.children.length == 0"
											class="collapse-box"
											@click.stop="clickItem(i)"
										>
											{{ i.townName }}
										</view>
										<u-collapse v-else :accordion="false" style="width: 100%">
											<u-collapse-item :title="i.townName" :key="i.id">
												<view
													:key="leafIndex + '_left'"
													v-for="(leaf, leafIndex) in i.children"
													class="collapse-box"
													@click.stop="clickItem(leaf)"
												>
													{{ leaf.townName }}
												</view>
											</u-collapse-item>
										</u-collapse>
									</template>
								</view>
							</u-collapse-item>
						</u-collapse>

						<view style="width: 650rpx" v-if="searchValue.length > 0">
							<view
								v-for="(i, index) in cityJsonFilter"
								:key="index"
								class="collapse-box-seach"
								@click.stop="clickItem(i)"
							>
								{{ i.countyName }} -{{ i.townName }}
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>
<script>
	import homeApi from '@/api/home.js'

	export default {
		name: 'sitePage',
		components: {},
		data() {
			return {
				appHeight: 0,
				addShow: false,

				autoPos: true,
				editShow: false,
				preObj: { name: '' },
				nextArr: [],
				options: [
					{
						text: '删除',
						style: {
							fontSize: '26rpx',
							'white-space': 'nowrap',
							backgroundColor: '#dd524d'
						}
					}
				],

				cityJson: [],
				searchValue: '',

				mainOpen: true,

				code: null
			}
		},
		computed: {
			cityJsonFilter() {
				const arr = this.filterData(this.cityJson, this.searchValue)
				const result = []
				const map = new Map()
				for (const item of arr) {
					if (!map.has(item.townName)) {
						map.set(item.townName, true)
						result.push(item)
					}
				}
				return result
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.data))
			this.initPage(data.nearData, data.receiveData)
			console.info(`data:`, data)
		},
		async mounted() {
			this.addShow = false
			this.appHeight = await this.$getHeight('.nav-custom')
			// this.initPage()
		},
		onShow() {
			this.editShow = false
		},
		methods: {
			async initPage(nearData, receiveData) {
				// homeApi.covtLink({
				// 	link: 'http://10.135.6.98:8012/api/EarlyWarning/Api/GetVillageWarnStaticInfo?addvcd=350400000000&dtBegin=2022-06-13 08:00:00&dtEnd=2022-06-15 10:00:00&WarnState=1,2,3,4&DisposeState=0,1&'
				// })
				const arr = uni.getStorageSync('sitePage')
				// const getUserInfoData = uni.getStorageSync('getUserInfoData')
				if (arr) {
					this.nextArr = arr
				}
				const resp = await homeApi.getBizOrgTree()
				let cityJson = resp.data[0].children[0].children[0]

				this.code = receiveData.areaCode || receiveData.code

				this.preObj = nearData
				this.preObj.name = nearData.localName
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: async (res) => {
				// 		// // that.getPageData(119.28, 26.08)
				// 		// 获取最近的站点数据
				// 		homeApi
				// 			.getNearestSite({ longitude: res.longitude, latitude: res.latitude, areaCode: getUserInfoData.dept.code })
				// 			.then((res) => {
				// 				this.preObj = res.data
				// 				this.preObj.name = res.data.townName
				// 			})
				// 	}
				// })
				// let arr1 = this.initData(cityJson, '三明')
				// this.cityJson = arr1[0].children
				let res = this.initDataJsonToarr(cityJson)
				this.cityJson = res.children
				this.$nextTick(() => {
					if (this.$refs.collapse) {
						this.$refs.collapse.init()
					}
				})
			},

			initDataJsonToarr(cityJson) {
				cityJson.name = '三明'
				// cityJson.name = '三明'
				let PreJson = JSON.parse(JSON.stringify(cityJson))
				PreJson.children = []

				cityJson.children.unshift(PreJson)
				cityJson.children.map((el) => {
					// 第一级
					el.townName = el.name
					el.countyName = el.name
					if (!el.children || el.children == 0) {
						el.children = []
					}
					let preEl = JSON.parse(JSON.stringify(el))
					preEl.children = []
					el.children.unshift(preEl)

					// 第二级
					el.children.map((child) => {
						child.townName = child.name
						child.countyName = el.name
						return child
					})
					return el
				})
				return cityJson
			},

			initData(cityJson, parentName) {
				cityJson.map((el) => {
					el.townName = el.name == '三明市' ? '三明' : el.name
					el.countyName = parentName

					if (el.children && el.children.length > 0) {
						el.children = this.initData(el.children, el.name)
						const preEl = JSON.parse(JSON.stringify(el))
						delete preEl.children
						el.children.unshift(preEl)
					}

					return el
				})

				return cityJson
			},
			deleteItem(index) {
				this.nextArr.splice(index, 1)
				uni.setStorageSync('sitePage', this.nextArr)
			},
			openEdit(editShow) {
				this.editShow = editShow
				this.nextArr.map((item) => {
					item.show = editShow
					return item
				})
			},
			addShowEv() {
				this.addShow = true
			},

			clickItem(i) {
				const el = this.nextArr.find((item) => {
					return item.id == i.id
				})
				if (!el) {
					this.nextArr.push(i)
					uni.setStorageSync('sitePage', this.nextArr)
				}
				uni.navigateBack()
				//{ url: '/pages/index/tabbar' }
				let data = i
				uni.$emit('updateHome', { data: data })
			},

			clickPreObj() {
				uni.navigateBack()
				//{ url: '/pages/index/tabbar' }
				uni.$emit('updateHome', { data: this.preObj })
			},

			filterData(list, value) {
				const arr = []
				list.forEach((item) => {
					if (item.id.indexOf(value) > -1 || item.name.indexOf(value) > -1) {
						arr.push(item)
						if (item.children && item.children.length > 0) {
							arr.push(...item.children)
						}
					}
					if (item.children && item.children.length > 0) {
						let res = this.filterData(item.children, value)
						arr.push(...res)
					}
				})

				return arr
			},

			changecollapse(value) {
				console.info(`value:`, value)
				this.mainOpen = value.show
			}
		}
	}
</script>
<style lang="less" scoped>
	.app-box {
		background: #fff;
		overflow: auto;
	}
	.sitePage {
		font-size: 26rpx;
		background: #fff;
		.add-box {
			background: #e4f2ff;
			border: 1rpx solid #0085ff;
			border-radius: 4rpx;
			width: 222rpx;
			height: 50rpx;
		}
		.title-box {
			padding: 20rpx 50rpx;
			border-bottom: 1rpx solid #e2e2e2;
		}
		.street-sin {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			height: 90rpx;
			border-bottom: 1rpx solid #e2e2e2;
			padding-left: 70rpx;
		}
		.sinPos {
			position: absolute;
		}

		.add-content {
			width: 100%;
			height: 100%;
			display: flex;
			// justify-content: center;
			flex-direction: column;
			align-items: center;
			background-color: #fff;
			.add-input {
				width: 648rpx !important;
				height: 70rpx;
				background: rgba(227, 241, 255, 0.6);
				border: 1rpx solid #0085ff;
				border-color: rgba(0, 133, 255, 0.7) !important;
				border-radius: 4rpx;
			}

			/deep/.collapse-view-box {
				height: calc(100% - 130rpx);

				.sv-box-collapse {
					height: 100%;
					overflow: auto;
				}
				.u-collapse-body {
					overflow: auto;
				}
			}
			.collapse-box {
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #e2e2e2;
				// text-indent: 30rpx;
			}
			.collapse-box-seach {
				width: 650rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #e2e2e2;
				text-indent: 30rpx;
			}
			.height-sv {
				width: 750rpx;
				height: calc(100% - 100rpx);
				overflow: auto;
				display: flex;
				justify-content: center;
			}
		}
	}
	/deep/.mainClass {
		height: fit-content !important;
	}
</style>
